﻿@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@section Scripts{
<script src="~/lib/monaco-editor/min/vs/loader.js"></script>
<script>
    require.config({
        paths: {
            vs: '/lib/monaco-editor/min/vs',
            analytic: '/js/analytic'
        }
    });

    require(['vs/editor/editor.main', 'analytic'], function (a, analytic) {
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'json'
        });

        $("#toJsonBtn").click(function () {
            var text = $("#source").val();

            var resultJson = analytic.analyticContext(text);

            editor.setValue(JSON.stringify(resultJson));
        });

        $("#toFormData").click(function () {

        });
    });
</script>
}

@section Styles{
<link href="~/lib/monaco-editor/min/vs/editor/editor.main.css" data-name="/lib/vs/editor/editor.main"
    rel="stylesheet" />
<style>
    #source {
        width: 100%;
        height: 600px;
    }

    .box {
        display: flex;
        flex-direction: row;
    }

    .left,
    .right {
        width: 50%;
        padding: 10px;
    }

    .btn-group {
        margin-bottom: 10px;
    }

    #container {
        width: 100%;
        height: 600px;
        border: 1px solid grey
    }
</style>
}

<div class="box">
    <div class="left">
        <div class="btn-group">
            <button class="btn btn-primary" id="toJsonBtn">FormData转Json</button>
            <button class="btn btn-info" id="toFormData">json转FormData</button>
        </div>
        <div>
            <textarea id="source">
abc[ddd][0]:1
abc[ddd][1]:2
abc[ddd][2]:3
abc[ddd][3]:4
    </textarea>
        </div>
    </div>
    <div class="right">
        <div class="btn-group">
            <button class="btn btn-primary">格式化</button>
            <button class="btn btn-info">复制</button>
            <button class="btn btn-danger">清空</button>
        </div>
        <div id="container"></div>
    </div>
</div>